<HTML xmlns:og="http://ogp.me/ns#" xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layout/default">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<TITLE>大连理工大学</TITLE>	

</HEAD>
<BODY>
	<div class="row" layout:fragment="content">
		<div class="col-md-8 col-md-offset-2">
		
			<DIV class="table-responsive">
			<form class="form-inline" method="post" id="myform" >
			<TABLE class="table dataTable">							
				<TBODY>
				    <tr><td colspan="2"><h2>客货滚装码头仿真教学实验</h2></td></tr>
				    <tr><td colspan="2"><p>客货滚装码头前沿精细化布置与交通组织决策支持系统模拟客货滚装码头前沿作业区行人流、车流的交通行为，支持实时显示交通流密度。学生可以通过控制交通流量等，观测码头前沿作业状态，探究功能区划分以及交通组织形式对客货滚装码头交通流的影响，掌握客货滚装码头前沿装卸工艺流程，认识客货滚装码头的评价指标。</p></td></tr>
					<tr><td><h2>方案一：</h2><p>下船旅客在前沿区采用不排队候车方式</p></td>
					<td><h2>方案二：</h2><p>下船旅客在前沿区采用排队候车方式</p></td></tr>
					<tr><td>视频1<iframe width="480" height="315" allow="fullscreen" src="https://cloud.anylogic.com/assets/embed?modelId=58055e80-2c73-432f-8e47-07f1c7a7389b"></iframe></td>
					<td>视频2<iframe width="480" height="315" allow="fullscreen" src="https://cloud.anylogic.com/assets/embed?modelId=58055e80-2c73-432f-8e47-07f1c7a7389b"></iframe></td></tr>
					 <tr><td colspan="2"><h2>仿真实验结果：</h2></td></tr>
					  
					 <tr><td>
					 <table class="table dataTable">
					 	<THEAD>
								<TR>
									<TH><h2>方案一</h2></TH>
									<TH>最大值</TH>
									<TH>最小值</TH>
									<TH>均值</TH>
								</TR>
						</THEAD>
						<tbody id="tb1">
						     <tr>
						     <td>摆渡车旅客<br></br>（行走距离/m)</td>
						       <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						     <tr>
						     <td>随行旅客<br></br>（行走距离/m)</td>
						        <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						     <tr>
						     <td>车辆<br></br>（等待时间/h)</td>
						 	  <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						     <tr>
						     <td>摆渡车旅客<br></br>（等待时间/h)</td>
						      <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						     <tr>
						     <td>随行旅客<br></br>（等待时间/h)</td>
						      <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						     <tr>
						     <td>摆渡车区<br></br>（最大旅客密度（人/m²）)</td>
						       <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						      <tr>
						     <td>旅客等待区-左<br></br>（最大旅客密度（人/m²）)</td>
						       <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						      <tr>
						     <td>旅客等待区-右<br></br>（最大旅客密度（人/m²）)</td>
						       <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						</tbody>
					 </table>
					 </td>
					 <td>
					 <table class="table dataTable">
					 	<THEAD>
								<TR>
									<TH><h2>方案二</h2></TH>
									<TH>最大值</TH>
									<TH>最小值</TH>
									<TH>均值</TH>
								</TR>
						</THEAD>
						<tbody id="tb2">
						     <tr>
						     <td>摆渡车旅客<br></br>（行走距离/m)</td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						     <tr>
						     <td>随行旅客<br></br>（行走距离/m)</td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						     <tr>
						     <td>车辆<br></br>（等待时间/h)</td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						     <tr>
						     <td>摆渡车旅客<br></br>（等待时间/h)</td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						     <tr>
						     <td>随行旅客<br></br>（等待时间/h)</td>
						    <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						     <tr>
						     <td>摆渡车区<br></br>（最大旅客密度（人/m²）)</td>
						    <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						      <tr>
						     <td>旅客等待区-左<br></br>（最大旅客密度（人/m²）)</td>
						    <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						      <tr>
						     <td>旅客等待区-右<br></br>（最大旅客密度（人/m²）)</td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     <td><input type="number"></input></td>
						     </tr>
						   
						</tbody>
					 </table>
					 </td>
					 </tr>
				</TBODY>
			</TABLE>
				<SCRIPT  th:inline="javascript">
				//tip是提示信息，type:'success'是成功信息，'danger'是失败信息,'info'是普通信息,'warning'是警告信息
				function showTip(tip, type) {
				    var $tip = $('#tip');
				    $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).fadeIn(500).delay(1000).fadeOut(500);
				}
		function save()
		{
			var sno=$("#sno").val();
			var sname=$("#sname").val();
			if(sno==""||sname=="")
				{
				showTip("请输入学号和姓名信息！","warning");
				return;
				}
			var rdata={};
			rdata.sno=sno;
			rdata.sname=sname;
			rdata.list=[];
			
		    	var map={}; 
		       map.dsbusmin=$("#tb1").children("tr").eq(0).find("td").eq(1).find("input").val();
		       map.dsbusave=$("#tb1").children("tr").eq(0).find("td").eq(2).find("input").val();
		       map.dsbusmax=$("#tb1").children("tr").eq(0).find("td").eq(3).find("input").val();
		       map.dscarmin=$("#tb1").children("tr").eq(1).find("td").eq(1).find("input").val();
		       map.dscarave=$("#tb1").children("tr").eq(1).find("td").eq(2).find("input").val();
		       map.dscarmax=$("#tb1").children("tr").eq(1).find("td").eq(3).find("input").val();
		       map.wtvehmin=$("#tb1").children("tr").eq(2).find("td").eq(1).find("input").val();
		       map.wtvehave=$("#tb1").children("tr").eq(2).find("td").eq(2).find("input").val();
		       map.wtvehmax=$("#tb1").children("tr").eq(2).find("td").eq(3).find("input").val();
		       map.wtbpmin=$("#tb1").children("tr").eq(3).find("td").eq(1).find("input").val();
		       map.wtbpave=$("#tb1").children("tr").eq(3).find("td").eq(2).find("input").val();
		       map.wtbpmax=$("#tb1").children("tr").eq(3).find("td").eq(3).find("input").val();
		       map.wtpcpmin=$("#tb1").children("tr").eq(4).find("td").eq(1).find("input").val();
		       map.wtpcpave=$("#tb1").children("tr").eq(4).find("td").eq(2).find("input").val();
		       map.wtpcpmax=$("#tb1").children("tr").eq(4).find("td").eq(3).find("input").val();
		       map.densbsmin=$("#tb1").children("tr").eq(5).find("td").eq(1).find("input").val();
		       map.densbsave=$("#tb1").children("tr").eq(5).find("td").eq(2).find("input").val();
		       map.densbsmax=$("#tb1").children("tr").eq(5).find("td").eq(3).find("input").val();
		       map.densLcpmin=$("#tb1").children("tr").eq(6).find("td").eq(1).find("input").val();
		       map.densLcpave=$("#tb1").children("tr").eq(6).find("td").eq(2).find("input").val();
		       map.densLcpmax=$("#tb1").children("tr").eq(6).find("td").eq(3).find("input").val();
		       map.densRcpmin=$("#tb1").children("tr").eq(7).find("td").eq(1).find("input").val();
		       map.densRcpave=$("#tb1").children("tr").eq(7).find("td").eq(2).find("input").val();
		       map.densRcpmax=$("#tb1").children("tr").eq(7).find("td").eq(3).find("input").val();
		       map.expno=1;
		       rdata.list.push(map);
		       map={}; 
		       map.dsbusmin=$("#tb2").children("tr").eq(0).find("td").eq(1).find("input").val();
		       map.dsbusave=$("#tb2").children("tr").eq(0).find("td").eq(2).find("input").val();
		       map.dsbusmax=$("#tb2").children("tr").eq(0).find("td").eq(3).find("input").val();
		       map.dscarmin=$("#tb2").children("tr").eq(1).find("td").eq(1).find("input").val();
		       map.dscarave=$("#tb2").children("tr").eq(1).find("td").eq(2).find("input").val();
		       map.dscarmax=$("#tb2").children("tr").eq(1).find("td").eq(3).find("input").val();
		       map.wtvehmin=$("#tb2").children("tr").eq(2).find("td").eq(1).find("input").val();
		       map.wtvehave=$("#tb2").children("tr").eq(2).find("td").eq(2).find("input").val();
		       map.wtvehmax=$("#tb2").children("tr").eq(2).find("td").eq(3).find("input").val();
		       map.wtbpmin=$("#tb2").children("tr").eq(3).find("td").eq(1).find("input").val();
		       map.wtbpave=$("#tb2").children("tr").eq(3).find("td").eq(2).find("input").val();
		       map.wtbpmax=$("#tb2").children("tr").eq(3).find("td").eq(3).find("input").val();
		       map.wtpcpmin=$("#tb2").children("tr").eq(4).find("td").eq(1).find("input").val();
		       map.wtpcpave=$("#tb2").children("tr").eq(4).find("td").eq(2).find("input").val();
		       map.wtpcpmax=$("#tb2").children("tr").eq(4).find("td").eq(3).find("input").val();
		       map.densbsmin=$("#tb2").children("tr").eq(5).find("td").eq(1).find("input").val();
		       map.densbsave=$("#tb2").children("tr").eq(5).find("td").eq(2).find("input").val();
		       map.densbsmax=$("#tb2").children("tr").eq(5).find("td").eq(3).find("input").val();
		       map.densLcpmin=$("#tb2").children("tr").eq(6).find("td").eq(1).find("input").val();
		       map.densLcpave=$("#tb2").children("tr").eq(6).find("td").eq(2).find("input").val();
		       map.densLcpmax=$("#tb2").children("tr").eq(6).find("td").eq(3).find("input").val();
		       map.densRcpmin=$("#tb2").children("tr").eq(7).find("td").eq(1).find("input").val();
		       map.densRcpave=$("#tb2").children("tr").eq(7).find("td").eq(2).find("input").val();
		       map.densRcpmax=$("#tb2").children("tr").eq(7).find("td").eq(3).find("input").val();
		       map.expno=2;
		       rdata.list.push(map);
		       console.log(rdata);
			$.ajax({
				type : "POST",
				url :  "saveResult3.json",
				data :  JSON.stringify(rdata),
				contentType : "application/json",
				dataType : "json",
	            success:function(data) {
	            	if(data.res==1){
	            		showTip(data.msg,"success");	
	            	}
	            		
	            	else
	            		showTip(data.msg,"danger");
				}
			});
		}
		</SCRIPT>
			</form>
			</DIV>
			<div align="center"> 
				<button data-toggle="modal" data-target="#myModal" class="btn btn-success" type="button">保存结果</button>
			</div>
			<div style="float:right;width:40%;height:40px">
					<div id="tip" style="display: none;z-index: 9999;width:100%;text-align:center;padding:10px;margin-bottom:2px;"></div>
				</div>
		</div>
		
		
		<!-- 模态框开始 -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="background-color:transparent;width:100%;max-height:100%;">
  <div class="modal-dialog" >
    <div class="modal-content" style="width:100%;height:100%">
 
   <!--    模态框头部 -->
      <div class="modal-header">
        <h2 class="modal-title">输入个人信息</h2>
      </div>
 
     <!--  模态框主体 -->
      <div class="modal-body">
          <input type="text" name="sno" id="sno" class="form-control" placeholder="请输入学号"></input>
          <input type="text" name="sname" id="sname" class="form-control" placeholder="请输入姓名"></input>
      </div>
 
      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-dismiss="modal" onClick="javascript:save()">提交</button>
        <button type="button" class="btn btn-warning" data-dismiss="modal">关闭</button>
      </div>
 
    </div>
  </div>
</div> 
<!-- 模态框结束 -->	
	</div>
</BODY>
</HTML>